<template>
    <div class="sysRole">
        <div class="buttons">
            <el-button icon="el-icon-plus" @click="addRole">添加</el-button>
            <el-button icon="el-icon-delete" @click="deleteRole">删除</el-button>
            <el-input style="flex:1;margin-left:100px" placeholder="请输入角色名称" prefix-icon="el-icon-search" v-model="searchKey">
            </el-input>
        </div>
        <div class="sysRoleTable">
            <el-skeleton style="width:100%;margin-top:15px;padding: 0px 10px" v-if="!isShowTable" :rows="15" animated />
            <el-table v-if="isShowTable" :data="tableData" style="width: 100%" ref="roleTable">
                <el-table-column type="selection" label="序号">
                </el-table-column>
                <el-table-column prop="name" label="角色名称">
                </el-table-column>
                <el-table-column prop="roleType" label="角色类型">
                    <template slot-scope="scope">
                        {{getRoleType(scope.row)}}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-edit" @click="updateRole(scope.$index, scope.row)">编辑</el-button>
                        <el-button icon="el-icon-plus" @click="grantPermission(scope.$index, scope.row)">角色授权</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10,50,100, 200, 300, 400]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <add-role-dialog v-if="isShowAddRole" @confirm="confirm" :params="params" @close="close" />
        <grant-permission-dialog v-if="isShowGrantDialog" @confirm="confirmGrant" :params="params" @close="close" />
    </div>
</template>
<script lang="ts">
    import { Component, Vue, Watch } from 'vue-property-decorator'
    import { Action, Getter } from 'vuex-class'
    import logo from '@/components/common/images/logo.png'
    import { namespace } from 'vuex-class';
    import * as _ from 'lodash';
    import AdminApiActions from "@/components/api/admin-api-actions";
    import AddRoleDialog from "@/components/admin-manager/user-role-manager/sys-role/add-role-dialog.vue";
    import GrantPermissionDialog from "@/components/admin-manager/user-role-manager/sys-role/grant-permission-dialog.vue";
    @Component({
        components: {
            AddRoleDialog,
            GrantPermissionDialog
        }
    })
    export default class SysUser extends Vue {
        public isShowAddRole: boolean = false;
        public tableData: Array < any >= new Array < any > ();
        public params: any = {};
        public total: Number = 0;
        public isShowTable: boolean = false;
        public pageSize: number = 10;
        public curPage: Number = 1;
        public roleType: any = "";
        public isShowGrantDialog: boolean = false;
        public searchKey: any = "";
        public scope: any = "";
        async created() {
            this.roleType = this.$route.query.type;
            await this.initTableData();
        }
        @Watch("$route")
        public async routeChange(from: any, to: any) {
            this.roleType = from.query.type;
            this.isShowTable = false;
            await this.initTableData();
        }
        public async initTableData() {
            let result: any = await AdminApiActions.getSysRolePage({ name: "", roleType: this.roleType, pageInfo: { pageSize: this.pageSize, pageNum: this.curPage } });
            this.tableData = result.data.list;
            this.total = result.data.total;
            this.isShowTable = true;
        }
        public getRoleType(row: any) {
            if (row.roleType === "1") {
                return "操作角色";
            }
            return "菜单角色";
        }
        //编辑用户
        public updateRole(index: any, item: any) {
            this.params.type = "update";
            this.params.form = {
                id: item.id,
                name: item.name,
                roleType: item.roleType
            }
            this.isShowAddRole = true;
        }
        //添加用户
        public addRole() {
            this.params.form = {
                name: "",
                roleType: this.roleType
            }
            this.params.type = "add";
            this.isShowAddRole = true;
        }
        //删除用户
        public async deleteRole() {
            let roleTable: any = this.$refs.roleTable;
            let selectData: Array < any >= roleTable.selection;
            await AdminApiActions.deleteRole(selectData);
            await this.initTableData();
        }
        public async grantPermission(index, row) {
            this.params.roleId = row.id;
            this.params.roleType = row.roleType;
            this.isShowGrantDialog = true;
        }
        //关闭弹出框
        public close() {
            this.isShowAddRole = false;
            this.isShowGrantDialog = false;
        }
        public async confirm() {
            this.isShowTable = true;
            this.isShowAddRole = false;
            await this.initTableData();
        }
        public async confirmGrant() {
            this.isShowGrantDialog = false;
            await this.initTableData();
        }
        //每页数量改变
        public async handleSizeChange(pageSize: any) {
            this.isShowTable = false;
            this.pageSize = pageSize;
            await this.initTableData();
        }
        //页数改变
        public async handleCurrentChange(curPage: any) {
            this.isShowTable = false;
            this.curPage = curPage;
            await this.initTableData();
        }
    }
</script>
<style lang="less">
    .sysRole {
        width: 100%;
        background-color: white;
        height: 100%;

        .el-main {
            padding: 0px 20px;
        }

        .buttons {
            display: flex;
            flex-direction: row;
        }

        .sysRoleTable {
            .el-table__body-wrapper {
                overflow-y: auto;
                height: calc(100% - 70px);
            }

            height: calc(100% - 60px);

            .el-table {
                height: calc(100% - 40px);
            }

            .el-pagination {
                margin-top: 12px;
            }
        }

        .el-dialog__body {
            padding: 5px 20px;
        }

        .el-dialog__footer {
            padding: 0px 20px 20px;
        }

        .el-form-item {
            display: flex;

            .el-form-item__label {
                width: 100px;
            }

            .el-form-item__content {
                flex: 1;
                margin-right: 40px;
            }
        }
    }
</style>